import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import styles from './index.module.less';

const BaseComponent = (props) => {
  const { className, children } = props;

  const [focused, setFocused] = useState(false);

  window.console.log('BaseComponent', children?.props?.tag, focused);

  return (
    <div
      tabIndex="0"
      onFocus={() => {
        setFocused(true);
      }}
      onBlur={() => {
        setFocused(false);
      }}
      className={classnames(styles.root, className)}
    >
      {React.cloneElement(children, { focused })}
    </div>
  );
};

BaseComponent.defaultProps = {
  className: null,
  children: null,
};

BaseComponent.propTypes = {
  className: PropTypes.any,
  children: PropTypes.any,
};

export default BaseComponent;
